<template>
  <section class="select">
    <el-select v-model="value" :allow-create="allowcreate" :clearable="clearable" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" style="width: 100%;" @change="handleChange">
      <el-option v-for="(item, index) in list" :key="item.code" :label="item.name" :value="item.code" />
    </el-select>
  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'SelectPageVarAndCustom',
  inject: ['pageVar'],
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    filterable() {
      return this.option.filterable
    },
    allowcreate() {
      return this.option.allowcreate
    }
  },
  created() {
    this.list = this.pageVar()
  },
  methods: {
    getValue() {
      return this.value
    },

    setValue(k) {
      this.$set(this, 'value', k)
    },

    setCheck(e) {
      let { value, required } = this
      if (this.option.override !== undefined) {
        this.option.override(this, value, this.list.length ? this.list : this.asyncList)
      }
      if (this.option.change !== undefined) {
        this.option.change(this, e)
      }
      let error = false; let errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    handleChange(e) {
      this.setCheck(e)
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
